<template>
  <div>
    <div v-for="task in tasks" :key="task.id" class="task-card" @click="goDetail(task.id)">
      <div class="task-title">{{ task.title }}</div>
      <div class="task-content">{{ task.content }}</div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const props = defineProps({ tasks: Array })
const router = useRouter()
function goDetail(id) { router.push(`/task/${id}`) }
</script>
<style scoped>
.task-card { background: #fff; border-radius: 12px; margin-bottom: 12px; padding: 16px; box-shadow: 0 2px 8px #f0f1f2; }
.task-title { font-weight: bold; font-size: 16px; margin-bottom: 6px; }
.task-content { color: #666; margin-bottom: 8px; }
</style> 